Estoy ejecutando... una aplicación next.js en modo desarrollador. Tengo una página que mapea a través de datos JSON desde el backend y representa un componente 'EventListItem' para cada objeto 'evento' contenido.
Página de lista:
Se puede hacer clic en este elemento de la lista para que el usuario pueda navegar a una página de detalles que contiene todos los detalles del objeto 'evento'.
Página de detalles:
En modo de desarrollo... cuando hago clic en el enlace, momentáneamente se activa un error antes de que el navegador navegue a la página correcta y muestre toda la información correctamente:
Unhandled Runtime Error Error: Failed to load script: /_next/static/chunks/pages/%5BcinemaId%5D/events/detail/%5Bdate%5D/%5BeventTypeId%5D.js Call Stack appendScript/</script.onerror node_modules/next/dist/client/route-loader.js (83:51)Pero, como dije, el error parpadea brevemente y luego el contenido de la página de detalles se muestra correctamente.
Cuando navego directamente a la URL sin hacer clic en el enlace... todo se muestra correctamente sin errores.
Cuando intento git bisect... Este error ha resistido mis intentos de encontrar la causa usando git bisect. La primera vez que puedo recordar fue hace tres días, sin embargo, cuando reviso las confirmaciones de hace más de una semana, el error está ahí. No puedo estar 100% seguro, pero no recuerdo haber visto este error cuando se realizaron esas confirmaciones.
Cuando el código se ejecuta en producción... No puedo replicar el código y todo funciona sin problemas
ServerSideRendering Actualmente, ninguna de las páginas tiene más que un código SSR básico. Actualmente, toda la obtención de datos se realiza en el lado del cliente. Esto cambiará.
Gracias por leer. Cualquier idea sería muy bienvenida. El código está aquí abajo como referencia...
El enlace en el componente:
<Link href={{pathname: "/[cinemaId]/events/detail/[date]/[eventTypeId]", query: {cinemaId: cinemaId, date: date, eventTypeId: showtime.eventTypeId} }} > <a className="font-bold text-lg">{showtime.name}</a> </Link>No probé esto, pero la sección de comentarios no es el área para esto. Parece que tiene que usar el componente Link como propiedad, porque es probable que su método de enrutamiento haga que el servidor no reconozca la página durante un período breve. Prueba algo similar a lo siguiente:
<Link href={`/${cinemaId}/events/`} as={`/${cinemaId}/events/`}> <a className="opacity-50 hover:text-cyan hover:opacity-100">{t('Programm')}</a> </Link>y luego verifique si tiene el enlace correcto antes de renderizar. Algo similar a lo siguiente:
if (pathname === '/${cinemaId}/events/') { app.render(req, res, '/user/signup', query) }Los dos últimos enlaces proporcionados son de lo que proviene mi respuesta, pero el hilo restante tiene algunas explicaciones más.
Referencias:
Obtención de 404 extraño antes de que se cargue la página. (Github). https://github.com/vercel/next.js/issues/2208 . (Consultado el 26 de agosto de 2021).
Obtención de 404 extraño antes de que se cargue la página. (Github). https://github.com/vercel/next.js/issues/2208#issuecomment-341107868 . (Consultado el 26 de agosto de 2021).
Obtención de 404 extraño antes de que se cargue la página. (Github). https://github.com/vercel/next.js/issues/2208#issuecomment-341939582 . (Consultado el 26 de agosto de 2021).
Para cualquiera que buscó en Google (como yo) y se perdió los detalles de la comunicación de @SimonGowing y @juliomalves: Tuve un error similar y usé el siguiente next/link :
<Link href={{ pathname: "/categories/[category]", query: { category: category.path, }, }}>Cambiar esto a un literal de cadena resolvió el problema y tampoco tengo problemas con el botón Atrás:
<Link href={`/categories/${category.path}`}>Yo tuve el mismo problema. Vine aquí para encontrar la solución, resulta que cambiar el componente Enlace de siguiente/enlace a una simple etiqueta haría el truco.